<template>
  <div class="home-container">
    <el-row :gutter="20">
      <!-- 数据概览卡片 -->
      <el-col :span="6" v-for="(item, index) in overviewData" :key="index">
        <el-card class="overview-card" :body-style="{ padding: '20px' }">
          <div class="card-content">
            <div class="card-icon" :style="{ backgroundColor: item.color }">
              <i :class="item.icon"></i>
            </div>
            <div class="card-info">
              <div class="card-value">{{ item.value }}</div>
              <div class="card-label">{{ item.label }}</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 最近签到任务 -->
    <el-card class="recent-tasks">
      <div slot="header">
        <span>最近签到任务</span>
        <el-button style="float: right; padding: 3px 0" type="text" @click="$router.push('/attendance/tasks')">查看全部</el-button>
      </div>
      <el-table :data="recentTasks" style="width: 100%">
        <el-table-column prop="title" label="任务标题"></el-table-column>
        <el-table-column prop="className" label="班级"></el-table-column>
        <el-table-column prop="type" label="签到类型">
          <template slot-scope="scope">
            <el-tag :type="getTaskTypeTag(scope.row.type)">{{ getTaskTypeText(scope.row.type) }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="signRate" label="签到率">
          <template slot-scope="scope">
            <el-progress :percentage="scope.row.signRate"></el-progress>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间"></el-table-column>
      </el-table>
    </el-card>

    <!-- 班级签到情况 -->
    <el-card class="class-statistics">
      <div slot="header">
        <span>班级签到情况</span>
      </div>
      <div class="chart-container">
        <div id="attendanceChart" style="width: 100%; height: 300px;"></div>
      </div>
    </el-card>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'Home',
  data() {
    return {
      overviewData: [
        { label: '班级总数', value: '5', icon: 'el-icon-school', color: '#409EFF' },
        { label: '学生总数', value: '187', icon: 'el-icon-user', color: '#67C23A' },
        { label: '今日签到任务', value: '3', icon: 'el-icon-s-check', color: '#E6A23C' },
        { label: '总签到率', value: '92%', icon: 'el-icon-data-line', color: '#F56C6C' }
      ],
      recentTasks: [
        {
          title: '计算机网络第一节课',
          className: '计算机2101',
          type: 1,
          signRate: 95,
          createTime: '2024-04-13 10:00'
        },
        {
          title: '数据结构实验课',
          className: '计算机2102',
          type: 2,
          signRate: 88,
          createTime: '2024-04-13 08:30'
        },
        {
          title: '操作系统理论课',
          className: '计算机2101',
          type: 3,
          signRate: 92,
          createTime: '2024-04-12 14:20'
        },
        {
          title: '高等数学习题课',
          className: '计算机2102',
          type: 4,
          signRate: 85,
          createTime: '2024-04-12 10:15'
        }
      ],
      chart: null
    }
  },
  mounted() {
    this.initChart()
  },
  beforeDestroy() {
    if (this.chart) {
      this.chart.dispose()
    }
  },
  methods: {
    getTaskTypeText(type) {
      const typeMap = {
        0: '普通签到',
        1: '手势签到',
        2: '位置签到',
        3: '二维码签到',
        4: '签到码签到'
      }
      return typeMap[type] || '未知类型'
    },
    getTaskTypeTag(type) {
      const typeMap = {
        0: '',
        1: 'info',
        2: 'warning',
        3: 'success',
        4: 'primary'
      }
      return typeMap[type] || ''
    },
    initChart() {
      this.chart = echarts.init(document.getElementById('attendanceChart'))

      const option = {
        title: {
          text: '近7天签到率统计'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['计算机2101', '计算机2102']
        },
        xAxis: {
          type: 'category',
          data: ['4-7', '4-8', '4-9', '4-10', '4-11', '4-12', '4-13']
        },
        yAxis: {
          type: 'value',
          min: 0,
          max: 100,
          name: '签到率(%)'
        },
        series: [
          {
            name: '计算机2101',
            type: 'line',
            data: [95, 93, 97, 90, 92, 95, 98],
            smooth: true
          },
          {
            name: '计算机2102',
            type: 'line',
            data: [88, 85, 90, 92, 85, 88, 91],
            smooth: true
          }
        ]
      }

      this.chart.setOption(option)
    }
  }
}
</script>

<style scoped>
.home-container {
  padding: 20px;
}

.overview-card {
  margin-bottom: 20px;
}

.card-content {
  display: flex;
  align-items: center;
}

.card-icon {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
}

.card-icon i {
  font-size: 24px;
  color: #fff;
}

.card-info {
  flex: 1;
}

.card-value {
  font-size: 24px;
  font-weight: bold;
  color: #303133;
  line-height: 1.2;
}

.card-label {
  font-size: 14px;
  color: #909399;
  margin-top: 4px;
}

.recent-tasks {
  margin-bottom: 20px;
}

.class-statistics {
  margin-bottom: 20px;
}

.chart-container {
  padding: 20px 0;
}
</style>
